/**
* 作者 ：食草狂魔
*
* 日期 ：2017/11/21
*
* 描述 ：登录页
*/
<template>
  <el-container class="loginContainer" style="min-height: 800px;">
    <el-main class="loginMain">
      <el-form class="loginForm">
        <div class="loginTitle">登录</div>
        <el-form-item class="loginRow userName">
          <el-input class="loginText" placeholder="请输入用户名/邮箱" ref="userName">
            <i slot="prefix" class="loginIcon">
            </i>
          </el-input>
        </el-form-item>
        <el-form-item class="loginRow password">
          <el-input class="loginText" placeholder="请输入密码" type="password" ref="userPass">
            <i slot="prefix" class="loginIcon">
            </i>
          </el-input>
        </el-form-item>
        <!--<el-form-item class="loginRow">-->
          <!--<el-col :span="15">-->
            <!--<el-input class="loginText vcodeText" placeholder="请输入验证码" ref="vcode"></el-input>-->
          <!--</el-col>-->
          <!--<el-col :span="7">-->
            <!--<a href="###">-->
              <!--<img src="./vcode.jpg" class="vcode">-->
            <!--</a>-->
          <!--</el-col>-->
          <!--<el-col :span="2">-->
            <!--<el-button type="text" class="refreshButton">刷新</el-button>-->
          <!--</el-col>-->
        <!--</el-form-item>-->
        <el-form-item class="loginRow">
          <el-button class="moduleButton loginButton" @click="signIn" @keyup.enter="signIn">立刻登录</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
  import crypto from 'crypto'
  import authAPIs from '../../api/authAPIs'
  import axios from 'axios'

  export default {
    name: "login",
    data () {
      return {}
    },
    methods: {
      signIn () {
        /*
        let vm = this
        localStorage.setItem("userId", vm.$refs.userName.$refs.input.value)
        localStorage.setItem("userPass", vm.$refs.userPass.$refs.input.value)

        vm.$router.push({ path: "/" })
*/
        let vm = this
        let { userName, userPass } = this.$refs
        let password = crypto.createHash("md5").update(userPass.$refs.input.value).digest("hex")

        authAPIs.login({

          accound: userName.$refs.input.value,
          password: password
        }).then(({ data }) => {
          console.log(JSON.stringify(data))
          if(data.code == 10000) {
            localStorage.setItem("token", data.data.token)
            localStorage.setItem("userName", data.data.userName)
            localStorage.setItem("roleName", data.data.roleName?data.data.roleName:data.data.userName)
            localStorage.setItem("menus", JSON.stringify(data.data.menus))

            vm.$router.push({ path: "/" })
          }
          else{
            this.$message.error('用户名或密码不匹配 !');
          }
        })

      }
    }
  }
</script>
<style>
  .loginContainer{
  	height: 80%;
    background: url("./login_bg.jpg") no-repeat center center;
    position: relative;
  }
  .loginContainer .loginMain{
  	position: relative;
  }
  .loginContainer .loginForm{
    width: 480px;
    height: 320px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    padding: 40px 60px 0 60px;
    position: absolute;
    right: 10%;
    bottom: 25%;
  }
  .loginContainer .loginForm .loginText{
    height: 50px;
  }
  .loginContainer .loginForm .loginTitle{
    font-size: 3rem;
    color: #346ca7;
    border-left: 8px solid #346ca7;
    width: 95%;
    text-align: left;
    line-height: 30px;
    padding-left: 3%;
    margin: 0 auto;
  }
  .loginContainer .loginForm .vcode{
    /*width: 70%;*/
    height: 50px;
  }
  .loginContainer .loginForm .refreshButton{
    color:red;
    font-size: 2rem;
  }
  .loginContainer .loginForm .loginRow{
    margin-top: 5%;
  }
  .loginContainer .loginForm .loginButton{
    width: 100%;
    height: 55px;
    font-size: 2.6rem;
    border-radius: 10px;
  }
  .loginContainer .loginForm .vcodeText{
    width: 300px;
  }
  .loginContainer .loginForm .loginText .el-input__inner{
    height: 100%;
  }
  .loginContainer .loginForm .el-input--prefix .el-input__inner{
    padding-left: 85px;
    height: 100%;

  }
  .loginContainer .loginForm .el-input__prefix{
    top: 13px;
    border-right: 1px solid #a4b2c2;
    height: 25px;
    width: 65px;
  }
  .loginContainer .loginForm .loginRow.userName .el-input__prefix{
    background: url("./user_icon.png") no-repeat center center;
    background-size: 40%;
  }
  .loginContainer .loginForm .loginRow.password .el-input__prefix{
    background: url("./password_icon.png") no-repeat center center;
    background-size: 40%;
  }
</style>
